<template>
  <div class="step-wrap">
    <div :class="num === 1 && isDeal === 0 ?'active': ''" class="step-item">已付款</div>
    <div v-if="num !== 5 && num !== 6" :class="(num === 1 && isDeal === 1) ?'active': ''" class="step-item">已接单</div>
    <div v-if="type === 1 && num !== 5 && num !== 6" :class="num === 2 ?'active': ''" class="step-item">到店</div>
    <div v-if="type === 1 && num !== 5 && num !== 6" :class="num === 3 ?'active': ''" class="step-item">离店</div>
    <div v-if="type !== 1 && num !== 5 && num !== 6" :class="num === 3 ?'active': ''" class="step-item">已核销</div>
    <div v-if="num !== 5 && num !== 6 && type !== 6" :class="num === 4 ?'active': ''" class="step-item">已完成</div>
    <div v-if="num === 5 || num === 6" :class="num === 5 ?'active': ''" class="step-item">售后中</div>
    <div v-if="num === 5 || num === 6" :class="num === 6 ?'active': ''" class="step-item">已处理</div>
  </div>
</template>
<script>
export default {
  name: 'OrderStep',
  props: {
    status: {
      type: Number,
      default: 1
    },
    type: {
      type: Number,
      default: 1
    },
    deal: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      num: 1,
      isDeal: 0,
      newType: 1
    }
  },
  computed: {
    changestatus() {
      return this.$route.path.indexOf('one') > -1
    }
  },
  watch: {
    deal(deal) {
      this.isDeal = deal
    },
    status(status) {
      this.num = status
    }
  },
  created() {
    this.num = this.status
    this.isDeal = this.deal
    this.newType = this.type
  }
}
</script>
<style lang="scss" scoped>
.step-wrap {
  width: 100%;
  background-color: #fff;
  height: 100px;
  margin-bottom: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  .step-item {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 80px;
    font-size: 14px;
    font-weight: 500;
    color: #050505;
    position: relative;
    border: 1px solid #e6e6e6;
    &::after {
      content: '';
      width: 80px;
      height: 2px;
      background-color: #e6e6e6;
      position: absolute;
      right:-80px;
      top: 50%;
      transform: translateY(-50%);
    }
    &:nth-last-of-type(1) {
      &::after {
        display: none;
      }
    }
  }
  .active {
    background-color: #409eff;
    color: #fff;
  }
}
</style>
